<template>
  <div class="memo-wrap">

    <div class="title-box">
      <div class="title-con" @click="queryType(1)">
        <span class="title" :class="{'select-active':type == 1}">待处理</span>
      </div>
      <div class="title-con" @click="queryType(2)">
        <span class="title" :class="{'select-active':type == 2}">已处理</span>
      </div>
    </div>

    <div class="memo-list" v-if="type == 1">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="memo-van"
      >
        <div class="memo-box" v-for="(item,index) in applyList" :key="index">
          <div class="line-box"></div>
          <div class="memo-con1">
            <span class="name">{{item.userName}}（{{item.workTypeName}}）</span>
            <img src="./phone.png" class="pic1" @click="callMobile(item.userTel)"/>
            <button type="button" class="status" @click="disposeApply(item.id)">已处理</button>
          </div>
          <div class="memo-con2">
            <div class="company-box">
              <img src="./company.png" class="pic2"/>
              <span class="company-name">{{item.mechanismName}}</span>
            </div>

            <div class="apply-time">报名时间：{{item.time | formatTime}}</div>
          </div>
        </div>
      </van-list>

      <div class="empty-box" v-if="applyList.length == 0 && !loading">
        <img src="../../../images/empty-work.png" class="empty"/>
      </div>
    </div>


    <div class="dispose-list" v-if="type == 2">
      <div class="date-box">
        <div class="date-icon">
          <img src="./date.png" class="pic3"/>
          <popup-picker :data="columnList" v-model="picker" class="date-title" @on-change="selectDay"></popup-picker>
        </div>
        <span class="number">共{{number}}条</span>
      </div>

      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="memo-van"
      >
        <div class="dispose-box" v-for="(item,index) in applyList" :key="index">
          <div class="memo-box">
            <div class="memo-con1">
              <span class="name">{{item.userName}}（{{item.workTypeName}}）</span>
              <img src="./phone.png" class="pic1" @click="callMobile(item.userTel)"/>
              <div class="status-box">
                <span class="status-title">处理时间</span>
                <span class="status-time">{{item.set_time | formatTime}}</span>
              </div>
            </div>
            <div class="memo-con2">
              <div class="company-box">
                <img src="./company.png" class="pic2"/>
                <span class="company-name">东莞厚街科技有限公司</span>
              </div>

              <div class="apply-time">报名时间：{{item.time | formatTime}}</div>
            </div>
          </div>
          <div class="line-box"></div>
        </div>
      </van-list>

      <div class="empty-box" v-if="applyList.length == 0 && !loading">
        <img src="../../../images/empty-work.png" class="empty"/>
      </div>
    </div>


  </div>
</template>

<script>
  import {PopupPicker} from 'vux'
  import {queryWorkOrderList, modifyApply} from '../../../axios/api'
  import {formatDate, getUrlKey} from "../../../config/util"

  export default {
    inject: ['reload'],
    data() {
      return {
        type: 1,
        columnList: [['全部', '最近三天', '最近一周', '最近两周', '最近一个月', '最近两个月']],
        picker: ['全部'],
        identity: '',
        status: 0,//0未处理1已处理
        day: "",//全部不传,3最近3天，7最近一周，14最近2周，31最近一个月，62最近两个月
        applyList: [],
        page: 1,
        size: 20,
        loading: false,
        finished: false,
        number: 0,
      }
    },
    created() {
      this.$store.dispatch("setIdentity", getUrlKey("identity"));
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      if (sessionStorage.getItem("identity")) {
        this.identity = base64.decode(sessionStorage.getItem("identity"));
      }
    },
    methods: {
      onLoad() {
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryApplyList();
            this.timer = null;
          }, 500)
        }
      },
      queryApplyList() {//查询报名记录
        let params = {
          "sgin": this.identity,
          "status": this.status,
          "day": this.day,
          "page": this.page,
          "size": this.size,
        };
        queryWorkOrderList(params).then((res) => {
          this.$vux.loading.hide();
          if (res.code == 0 && res.data != null && res.data.length > 0) {
            this.applyList = this.applyList.concat(res.data);
            if (this.applyList[0].num) {
              this.number = this.applyList[0].num;
            }
            this.loading = false;
            this.page++;
          } else {
            this.loading = false;
            if (this.applyList.length >= res.data.length) {
              this.finished = true;
            }
          }
        });
      },
      queryType(index) {//标题切换
        this.status = index == 1 ? 0 : 1;
        this.day = '';
        this.type = index;
        this.initVant();
      },
      callMobile(number) {//拨号
        window.location.href = 'tel://' + number;
      },
      initVant() {//初始化
        this.page = 1;
        this.size = 20;
        this.applyList = [];
        this.loading = true;
        this.finished = false;
        this.number = 0;
        if (this.loading) {
          this.queryApplyList();
        }
      },
      selectDay(value) {//选择日期
        let day = String(value);
        if (day == "最近三天") {
          this.day = 3;
        } else if (day == "最近一周") {
          this.day = 7;
        } else if (day == "最近两周") {
          this.day = 14;
        } else if (day == "最近一个月") {
          this.day = 31;
        } else if (day == "最近两个月") {
          this.day = 62;
        } else {
          this.day = "";
        }
        this.initVant();
      },
      disposeApply(id) {//已处理
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "sgin": this.identity,
          "workOrderId": id
        };
        modifyApply(data).then((res => {
          this.$vux.loading.hide();
          if (res.code == 0 && res.data == 1) {
            this.reload();
          }
        }));
      }
    },
    filters: {
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'MM月dd日 hh:mm');
      }
    },
    components: {
      PopupPicker
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .memo-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .title-box {
      .fj(center, center);
      position: fixed;
      top: 0;
      z-index: 99;
      .wh(100%, 1.2rem);
      border-bottom: @talent-border-bottom;
      .size-color(0.427rem, rgba(153, 153, 153, 1));
      background: @talent-bg-color;
      .title-con {
        .fj(center, center);
        .wh(1.6rem, 100%);
        flex: 1;
        .title {
          .fj(center, center);
          .wh(1.6rem, 100%);
        }
        .select-active {
          .size-color-weight(0.48rem, rgba(255, 145, 38, 1), 500);
          border-bottom: 0.08rem solid rgba(255, 143, 51, 1);
        }
      }
    }
    .memo-list {
      position: absolute;
      top: 1.2rem;
      .wh(100%, auto);
      .memo-van {
        margin-bottom: 1.307rem;
        .memo-box {
          .wh(100%, 2.96rem);
          background: @talent-bg-color;
          .memo-con1 {
            display: flex;
            align-items: center;
            margin-left: 0.32rem;
            margin-right: 0.32rem;
            height: 1.28rem;
            border-bottom: @talent-border-bottom;
            .name {
              .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
              margin-right: 0.64rem;
            }
            .pic1 {
              .wh(0.533rem, 0.533rem)
            }
            .status {
              margin-left: auto;
              .wh(1.6rem, 0.72rem);
              border: 0.027rem solid rgba(255, 143, 51, 1);
              .border-radius(0.107rem);
              .size-color-weight(0.347rem, rgba(255, 143, 51, 1), 500);
              background: @talent-bg-color;
            }
          }
          .memo-con2 {
            .fj(flex-start, center);
            flex-direction: column;
            margin-left: 0.32rem;
            height: 1.413rem;
            .company-box {
              display: flex;
              align-items: center;
              padding-bottom: 0.187rem;
              .pic2 {
                .wh(0.4rem, 0.4rem);
              }
              .company-name {
                margin-left: 0.213rem;
                .size-color(0.373rem, rgba(102, 102, 102, 1));
              }
            }
            .apply-time {
              .size-color(0.32rem, rgba(153, 153, 153, 1));
            }
          }
        }
      }
    }
    .dispose-list {
      .wh(100%, auto);
      .date-box {
        position: fixed;
        top: 1.2rem;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .wh(100%, 0.8rem);
        background: @talent-theme-bg-color;
        .date-icon {
          display: flex;
          align-items: center;
          margin-left: 0.32rem;
          .pic3 {
            margin-right: 0.187rem;
            .wh(0.32rem, 0.32rem)
          }
          .date-title {
            .size-color(0.32rem, rgba(255, 143, 51, 1))
          }
        }
        .number {
          margin-right: 0.32rem;
          .size-color(0.32rem, rgba(204, 204, 204, 1));
        }
      }
      .memo-van {
        position: absolute;
        top: 2rem;
        margin-bottom: 1.307rem;
        .wh(100%, auto);
        .dispose-box {
          .wh(100%, auto);
          .memo-box {
            .wh(100%, 2.693rem);
            background: @talent-bg-color;
            .memo-con1 {
              display: flex;
              align-items: center;
              margin-left: 0.32rem;
              margin-right: 0.32rem;
              height: 1.28rem;
              border-bottom: @talent-border-bottom;
              .name {
                .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
                margin-right: 0.64rem;
              }
              .pic1 {
                .wh(0.533rem, 0.533rem)
              }
              .status-box {
                margin-left: auto;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                .status-title {
                  padding-bottom: 0.133rem;
                  .size-color(0.373rem, rgba(153, 153, 153, 1))
                }
                .status-time {
                  .size-color(0.293rem, rgba(153, 153, 153, 1))
                }
              }
            }
            .memo-con2 {
              .fj(flex-start, center);
              flex-direction: column;
              margin-left: 0.32rem;
              height: 1.413rem;
              .company-box {
                display: flex;
                align-items: center;
                padding-bottom: 0.187rem;
                .pic2 {
                  .wh(0.4rem, 0.4rem);
                }
                .company-name {
                  margin-left: 0.213rem;
                  .size-color(0.373rem, rgba(102, 102, 102, 1));
                }
              }
              .apply-time {
                .size-color(0.32rem, rgba(153, 153, 153, 1));
              }
            }
          }
        }
      }
    }

    .empty-box {
      .fixed-auto(fixed);
      .fj(center, center);
      .empty {
        .wh(5.707rem, 5.707rem);
      }
    }

    .line-box {
      .wh(100%, 0.267rem);
      background: @talent-theme-bg-color;
    }
  }
</style>
